<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <image src="../../static/img/indexbgc.png" mode="aspectFill" style="width: 100%; height: 340rpx"></image>
      <view class="title">资料库</view>
      <image src="../../static/img/databanner.png" mode="aspectFill" class="banner"></image>

      <!-- 选择 -->
      <view class="choose">
        <view style="text-align: center" @click="goteach">
          <image src="../../static/img/jiaoxue.png" mode="aspectFill" style="width: 100rpx; height: 100rpx"></image>
          <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">教学方法</view>
        </view>
        <view style="text-align: center" @click="goalfx">
          <image src="../../static/img/anlishare.png" mode="aspectFill" style="width: 100rpx; height: 100rpx"></image>
          <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">案例分享</view>
        </view>
        <view style="text-align: center" @click="gozlxz">
          <image src="../../static/img/datadownload.png" mode="aspectFill" style="width: 100rpx; height: 100rpx"></image>
          <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">资料下载</view>
        </view>
      </view>
      <!-- 文章 -->
      <view class="articlebox">
        <image src="../../static/img/bannerimg1.png" mode="aspectFill" style="width: 710rpx; height: 280rpx"></image>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 30rpx; margin-top: 10rpx">
          如何养成良好的学习习惯？
        </view>
      </view>
      <view class="articlebox">
        <image src="../../static/img/bannerimg2.png" mode="aspectFill" style="width: 710rpx; height: 280rpx"></image>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 30rpx; margin-top: 10rpx">
          如何养成良好的学习习惯？
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 跳转到教学方法
    goteach() {
      uni.navigateTo({
        url: '/sub_databank/jxff/jxff'
      });
    },
    // 跳转到案例分享
    goalfx() {
      uni.navigateTo({
        url: '/sub_databank/alfx/alfx'
      });
    },
    // 跳转到资料下载
    gozlxz() {
      uni.navigateTo({
        url: '/sub_databank/zlxz/zlxz'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .title {
    position: absolute;
    top: 65rpx;
    left: 315rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }
  .banner {
    position: absolute;
    top: 170rpx;
    left: 20rpx;
    width: 710rpx;
    height: 300rpx;
  }
  .choose {
    display: flex;
    justify-content: space-around;
    margin-top: 150rpx;
  }
  .articlebox {
    box-sizing: border-box;
    width: 710rpx;
    height: 360rpx;
    margin: 30rpx 20rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 2rpx rgba(191, 191, 191, 0.16);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
